<template>
  <!--
    	作者：luoyiming
    	时间：2020-04-26
    	描述：门店-编辑门店
    -->
  <div class="product-add">
    <!--form表单-->
    <el-form size="small" ref="form" :model="form" label-width="80px">
      <!--编辑门店-->
      <div class="common-form">编辑赛事</div>
      
      <el-form-item label="国家(左)" prop="country_id_l" :rules="[{required: true,message: '请选择国家 '}]">
        <el-select v-model="form.country_id_l" clearable>
          <template>
            <el-option :value="0" key="0" label="请选择国家"></el-option>
            <el-option v-for="item in country_list"
              :value="item.european_country_id"
              :key="item.european_country_id"
              :label="item.country"
            ></el-option>
          </template>
        </el-select>
    </el-form-item>


    <el-form-item label="国家(右)" prop="country_id_r" :rules="[{required: true,message: '请选择国家 '}]">
        <el-select v-model="form.country_id_r" clearable>
          <template>
            <el-option :value="0" key="0" label="请选择国家"></el-option>
            <el-option v-for="item in country_list"
              :value="item.european_country_id"
              :key="item.european_country_id"
              :label="item.country"
            ></el-option>
          </template>
        </el-select>
    </el-form-item>
      <!-- <el-form-item label="赛事" prop="team" :rules="[{required: true,message: '请输入赛事 '}]">
        <el-input  v-model="form.team" placeholder="请输入赛事" class="max-w460"></el-input>
      </el-form-item>

      <el-form-item label="国旗（左）">
        <el-row>
          <el-button icon="el-icon-picture-outline" @click="openUpload('image','national_flag_l')">选择图片</el-button>
          <div v-if="form.national_flag_l" class="img mt10">
            <img :src="form.national_flag_l" width="100" height="100"/>
          </div>
        </el-row>
      </el-form-item>

      <el-form-item label="国旗（右）">
        <el-row>
          <el-button icon="el-icon-picture-outline" @click="openUpload('image','national_flag_r')">选择图片</el-button>
          <div v-if="form.national_flag_r" class="img mt10">
            <img :src="form.national_flag_r" width="100" height="100"/>
          </div>
        </el-row>
      </el-form-item> -->

      <el-form-item label="背景图">
        <el-row>
          <el-button icon="el-icon-picture-outline" @click="openUpload('image','bg_img')">选择图片</el-button>
          <div v-if="form.bg_img" class="img mt10">
            <img :src="form.bg_img" width="100" height="100"/>
          </div>
        </el-row>
      </el-form-item>
    


      <el-form-item label="背景色" prop="bg_color" :rules="[{required: true,message: '请输入背景色'}]">
        <el-color-picker v-model="form.bg_color" @change="change"></el-color-picker>
      </el-form-item>
      

    

      
  
      <!--活动时间-->
   
     <el-form-item label="开始时间" prop="start_time"
      :rules="[{ required: true, message: '请选择开始时间', trigger: 'changes' }]">
      <el-date-picker
        v-model="form.start_time"
        type="datetime"
        placeholder="开始时间"
        format="yyyy-MM-dd HH:mm"
        value-format="yyyy-MM-dd HH:mm"></el-date-picker>
    </el-form-item>

    
    <el-form-item label="结束时间" prop="end_time"
      :rules="[{ required: true, message: '请选择结束时间', trigger: 'changes' }]">
      <el-date-picker
        v-model="form.end_time"
        type="datetime"
        placeholder="结束时间"
        format="yyyy-MM-dd HH:mm"
        value-format="yyyy-MM-dd HH:mm"></el-date-picker>
    </el-form-item>
     


    <el-form-item label="比分" prop="european_score_id" >
        <el-select v-model="form.european_score_id" clearable>
          <template>
            <el-option :value="0" key="0" label="请选择"></el-option>
            <el-option v-for="item in list"
              :value="item.european_score_id"
              :key="item.european_score_id"
              :label="item.score"
            ></el-option>
          </template>
        </el-select>
    </el-form-item>

      <!--提交-->
      <div class="common-button-wrapper">
        <el-button size="small" type="info" @click="cancelFunc">取消</el-button>
               <el-button size="small" type="primary" @click="onSubmit" :loading="loading">提交</el-button>
      </div>
    </el-form>

    <!--图片组件-->
    <Upload v-if="isupload" :isupload="isupload" @returnImgs="returnImgsFunc">
      上传图片
    </Upload>
  </div>
</template>

<script>


import europeanApi from '@/api/european.js';
import Upload from '@/components/file/Upload';

export default {
  components: {
    Upload,

  },
  data() {
    return {
      
      /*时间*/
      timeVal: new Date(2016, 9, 10, 8, 0, 0),
      /*如果没有后面的-8.64e7就是不可以选择今天的*/
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        }
      },
      /*form表单数据*/
      form: {
        start_time: '',
        end_time: '',
        european_score_id: '',
        country_id_l:'',
        country_id_r:'',
        bg_img: '',
        bg_color: '',
        european_match_id:''
      },
      list:[],
    
      /*是否上传图片*/
      isupload: false,
      loading: false,
      country_list:[],
     
    };
  },
  created() {

    this.form.european_match_id = this.$route.query.european_match_id;
    this.getData();
  
  
  },

  methods: {
    

    /*打开上传图片*/
    openUpload: function (file_type, file_name) {
    
      this.file_name = file_name;
      if (file_type == 'image') {
        this.config = {
          total: 1,
          file_type: 'image'
        };
      } 
      this.isupload = true;
    },

    /*上传商品图片*/
    returnImgsFunc(e) {
      console.log('上传',e)
      if (e != null) {
        if (this.file_name == 'national_flag_l') {
          this.form.national_flag_l = e[0].file_path;
        }else if(this.file_name == 'national_flag_r'){
          this.form.national_flag_r = e[0].file_path;
        }else if(this.file_name == 'bg_img'){
          this.form.bg_img = e[0].file_path;
        }


      }
      this.isupload = false;
    },

    change(e){
      this.form.bg_color = e;
    },


    /*修改*/
    onSubmit() {
      let self = this;
      let form = self.form;
      self.$refs.form.validate((valid) => {
        if (valid) {
          self.loading = true;
          europeanApi.editeuropeanmatch(form, true)
            .then(data => {
              self.loading = false;
              self.$message({
                message: '操作成功',
                type: 'success'
              });
              self.$router.push('/plus/european/european/europeanmatchlist');
            }).catch(error => {
            self.loading = false;
          });
        }
      });
    },


   

    /*获取参数*/
    getData() {
      let self = this;
      europeanApi.geteuropeanmatch({
        european_match_id: self.form.european_match_id
      }, true)
        .then(res => {
          self.form = res.data.model
          self.list = res.data.list,
          self.country_list = res.data.country_list
        })
        .catch(error => {

        });

    },
  


    /*取消*/
    cancelFunc() {
      this.$router.back(-1);
    }

  }

};
</script>

<style lang="scss" scoped>
.basic-setting-content {
}

.product-add {
  padding-bottom: 50px;
}

.img {
  margin-top: 10px;
}
</style>
<style lang="scss">
.dialog-footer-at-remark-map{
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
}
</style>
